<script setup lang="ts">
import { Switch } from 'ant-design-vue';

defineOptions({
  name: 'AppSettingsLayout',
});

/**
 * 布局
 */
const verticalLayout = ref(false);
const horizontalLayout = ref(false);
</script>

<template>
  <div>
    <!--  TODO 优化样式 布局设置  -->
    <!-- 参考 https://www.vben.pro/#/analytics -->
    <h3>布局</h3>
    <div class="setting-line">
      <span>垂直布局</span>
      <Switch v-model:checked="verticalLayout" :disabled="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>水平布局</span>
      <Switch v-model:checked="horizontalLayout" :disabled="verticalLayout" />
    </div>

    <h3>侧边栏</h3>
    <div class="setting-line">
      <span>折叠菜单</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>宽度</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>

    <h3>顶栏</h3>
    <div class="setting-line">
      <span>模式</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>

    <h3>导航菜单</h3>
    <div class="setting-line">
      <span>侧边栏手风琴模式</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>

    <h3>面包屑导航</h3>
    <div class="setting-line">
      <span>开启面包屑导航</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>仅有一个时隐藏</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>显示面包屑图标</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>显示首页按钮</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>

    <h3>标签栏</h3>
    <div class="setting-line">
      <span>启用标签栏</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>持久化标签页</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>启用拖拽排序</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>显示标签栏按钮</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>显示更多按钮</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
    <div class="setting-line">
      <span>显示刷新按钮</span>
      <Switch v-model:checked="horizontalLayout" />
    </div>
  </div>
</template>

<style scoped lang="less">
.setting-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 6px;
  border-radius: 4px;

  &:hover {
    cursor: pointer;
    background: #f4f4f5;
  }
}
</style>
